
<html>
<head>
    <title>hivue</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles/demo.css">
</head>
<body>
<div id="app">

    <div>
        Name:<input type="text" v-model="newGirl.name">
    </div>
    <div>
        Age:<input type="text" v-model="newGirl.age">
    </div>
    <div>
        Price:<input type="text" v-model="newGirl.price">
    </div>
    <div>
        次数:<input type="number" v-model="cx" >
    </div>
    <button @click="add">NewGirl</button>
    ${{newGirl}}
      <table>
          <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Price</th>
              <th>Times</th>
              <th>Total</th>
              <th>Delete</th>
          </tr>
          <tr v-for="(g,index) in girls">
              <td>{{g.name}}</td>
              <td>{{g.age}}</td>
              <td>{{g.price}}</td>
              <td>{{g.times}}</td>
              <td>{{g.total}}</td>
              <td ><button @click="del(index)">Remove</button></td>
          </tr>
      </table>
    <button @click="hello">Hello</button>

</div>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            name:"郭碧婷",
            price:8899,
            cx:1,
            newGirl:{
                name:'',
                age:18,
                price:300,
                times:1,
                total:0,
                birthday:'2020-07-07'
            },
            girls:[
                {name:'杨幂',age:38,price:2959,times:1,total:0},
                {name:'范冰冰',age:48,price:1299,times:1,total:0},
                {name:'李冰冰',age:18,price:1299,times:1,total:0},
            ]
        },
        methods:{
            hello:function () {
                alert(this.name+" had sex with 梁晟 for"+this.price )
            },
            add:function () {
                this.girls.push(this.newGirl)

                // axios.post("http://localhost:8080/jeecg-boot/vip/vip/add",Qs.stringify(
                //     this.newGirl
                // ))
                axios.post("http://localhost:8080/jeecg-boot/vip/vip/add", this.newGirl)

                    .then(function (response) {
                        console.log(response)

                    })
                .catch(function (error) {
                        console.log(error)
                })
                this.newGirl={
                    name:'',
                    age:18,
                    price:300,
                    times:1,
                    total:300
                }
            },
            del:function (index) {
                console.log("index "+index)
               this.girls.splice(index,1)
            }

        },watch:{
            cx(value){
                this.newGirl.times=value
                this.newGirl.total=value*this.newGirl.price
            }

        },
        created() {
            var that=this
            axios.get("http://localhost:8080/jeecg-boot/vip/vip/list")
            .then(function (response) {
               console.log(response.data)
                that.newGirl=response.data.result.records[1]
                console.log(this.newGirl)
            })
        }
    })
</script>
</body>
</html>
